<% @body_id = 'home' %>

<div class="homepage-hero-image mb-3 position-relative">
  <img class="lazyload hero-image position-absolute"
    data-src="<%= asset_path('homepage/main_banner.jpg') %>"
    data-srcset="<%= image_source_set('homepage/main_banner') %>"
    alt="<%= Spree.t('homepage.summer_collection')%>" />

  <div class="hero-content">
    <div class="homepage-hero-image-text mb-2 mx-auto pb-3 pb-md-4">
      <%= Spree.t('homepage.summer_collection') %>
    </div>
    <div>
      <%= link_to Spree.t('homepage.shop_now'), spree.products_path, class: 'btn btn-primary spree-btn px-5' %>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-6">

      <%= link_to spree.nested_taxons_path('men'), class: "homepage-taxon-box mb-3" do %>
        <img class="w-100 lazyload"
          data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
          data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
          alt="<%= Spree.t('homepage.men')%>" />

        <div class="homepage-taxon-box-text">
          <h3><%= Spree.t('homepage.men') %></h3>
        </div>
      <% end %>

      <%= link_to spree.nested_taxons_path('sportswear'), class: "homepage-taxon-box" do %>
        <img class="w-100 lazyload"
          data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
          data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
          alt="<%= Spree.t('homepage.sportswear')%>" />

        <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
          <h3><%= Spree.t('homepage.sportswear') %></h3>
        </div>
      <% end %>

    </div>

    <div class="col-6 d-flex flex-column">

      <%= link_to spree.nested_taxons_path('women'), class: "homepage-taxon-box flex-grow-1" do %>
        <img class="w-100 lazyload"
          data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
          data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
          alt="<%= Spree.t('homepage.women')%>" />

        <div class="homepage-taxon-box-text">
          <h3><%= Spree.t('homepage.women') %></h3>
        </div>
      <% end %>

    </div>
  </div>
</div>

<div data-product-carousel data-product-carousel-taxon-id='bestsellers' class="my-3"></div>

<div class="homepage-fashion-trends-box mb-3">
  <div class="text-center">
    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2020') %></div>
    <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= Spree.t('homepage.fashion_trends') %></div>
    <div class="homepage-fashion-trends-box-description-text text-center mb-3">
      <%= Spree.t('homepage.fashion_trends_note') %>
    </div>
    <%= link_to Spree.t('homepage.read_more'), spree.nested_taxons_path('trending'), class: 'btn px-5 spree-btn btn-outline-primary' %>
  </div>
</div>


<div data-product-carousel data-product-carousel-taxon-id='trending' class="mb-3"></div>

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-6">
      <%= link_to spree.nested_taxons_path('streetstyle') do %>
        <div class="homepage-bottom-box text-center mb-3">
          <img class="w-100 lazyload"
            data-src="<%= asset_path('homepage/promo_banner_left.jpg') %>"
            data-srcset="<%= image_source_set('homepage/promo_banner_left') %>"
            alt="<%= Spree.t('homepage.new_collection')%>" />

          <div class="homepage-bottom-box-inner" role="img" aria-label="<%= Spree.t('homepage.new_collection') %>">
            <div class="homepage-bottom-box-inner-small-text">
              <%= Spree.t('homepage.new_collection') %>
            </div>
            <div class="homepage-bottom-box-inner-big-text">
              <%= Spree.t('homepage.streetstyle') %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div class="col-12 col-lg-6">
      <%= link_to spree.nested_taxons_path('summer-sale') do %>
        <div class="homepage-bottom-box text-center mb-3">
          <img class="w-100 lazyload"
            data-src="<%= asset_path('homepage/promo_banner_right.jpg') %>"
            data-srcset="<%= image_source_set('homepage/promo_banner_right') %>"
            alt="<%= Spree.t('homepage.summer_sale')%>" />

          <div class="homepage-bottom-box-inner">
            <div class="homepage-bottom-box-inner-small-text">
              <%= Spree.t('homepage.summer_sale') %>
            </div>
            <div class="homepage-bottom-box-inner-big-text">
              <%= Spree.t('homepage.up_to_60') %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>
